<template>
  <div>
    <router-link to="/userCenter">
      <div class="top-column">
        <div class="userinfo">
          <div class="info-img">
            <img :src="userInfo.image" alt="">
          </div>
          <div class="info-text">
            <p>{{userInfo.username}}</p>
            <p class="info-content">&nbsp;</p>
          </div>
        </div>
      </div>
    </router-link>

    <card class="m-t-0">
      <div slot="content" class="card-demo-flex card-demo-content01">
      	<div v-for="(orderIcon,i) in orderIcons" :key="i">
      	  <router-link :to="{ path:orderIcon.url, query: { num: i+1 } }">
       		  <div class="icon-block" >
            <span class="iconfont icon-size" :class="orderIcon.icons"></span>
            <br/>
            <h5>{{orderIcon.title}}</h5>
        		</div>
         </router-link>
         </div>
      </div>
    </card>
  <group class="m-1-t">
      <router-link :to="{ path:'all', query: { num:0 } }">
        <cell title="我的订单" value='查看全部订单' is-link></cell>
      </router-link>
    </group>
    <group class="m-1-t b-t-block">
      <router-link to="/address">
        <cell title="收货地址" is-link></cell>
      </router-link>
      <router-link to="/collectionCentre">
        <cell title="收藏中心" is-link></cell>
      </router-link>
      <router-link to="/you">
        <cell title="客服中心" is-link></cell>
      </router-link>
    </group>
    <goodList></goodList>
    <footer>
      <foot></foot>
    </footer>
  </div>
</template>

<script>
import { Grid, GridItem, Group, Cell, Card } from 'vux'
import GoodList from '@/components/goodList.vue'
import Foot from '@/components/footer.vue'
import Data from '@/server/server.js'

export default {
  components: {
    Grid,
    GridItem,
    Group,
    Cell,
    Card,
    GoodList,
    Foot
  },
  data () {
    return {
      orderIcons: [
        {
          url: '/all',
          icons: 'icon-yinhangqia-xianxing',
          title: '待付款'
        },
        {
          url: '/all',
          icons: 'icon-baoguofahuo-xianxing',
          title: '待发货'
        },
        {
          url: '/all',
          icons: 'icon-yunshuzhongwuliu-xianxing',
          title: '待收货'
        },
        {
          url: '/all',
          icons: 'icon-liaotianduihua-xianxing',
          title: '待评价'
        },
        { url: '/refund', icons: 'icon-tuikuan', title: '退款/售后' }
      ],
      userInfo: {}
    }
  },
   mounted (){
    Data.userInfo.then(data => {
        this.userInfo = data
      })
  }
}
</script>

<style scoped>
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
.top-column {
  background: #d34201 url(//gw.alicdn.com/tfscom/TB10.51HFXXXXXqXpXXYx6l2pXX-750-235.jpg_q90) no-repeat top center;
}
.userinfo {
  margin-left: 20px;
  padding: 40px 0 28px 0;
}
.info-img img {
  width: 65px;
  border-radius: 50%;
  vertical-align: middle;
  float: left;
}
.userinfo .info-text {
  display: inline-block;
  margin-left: 20px;
  color: #fff;
  line-height: 28px;
  font-size: 18px;
  padding-top: 10px;
}
.userinfo .info-content {
  color: #ffe09b;
  font-size: 14px;
}
.m-1-t {
  margin-top: -1.3em;
}
.icon-block {
  color: #f05c3a;
}
.icon-size {
  font-size: 25px;
}
.m-t-0 {
  margin-top: 0;
}
a {
  color: #333;
  font-size: 16px;
}
.card-demo-flex {
  display: -webkit-box;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.b-t-block a div{
  border-bottom: 1px solid #E5E5E5;
}
</style>